<template>
	<view>
		<view class="end-title">
			<view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
				{{item}}
			</view>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 0}">
			　　<selected-index></selected-index>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 1}">
			<earlyEducation></earlyEducation>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 2}">
			<picture-book></picture-book>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 3}">
			<my-cartoon></my-cartoon>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 4}">
			<song-story></song-story>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnnum: 0,
				items: ['精选', '早教', '绘本', '卡通', '儿歌故事'],
				count: "",
			}
		},
		methods: {
			change(e) {
				this.count = e
				this.btnnum = e
			}
		}
	}
</script>

<style scoped>
	/* 将三个内容view的display设置为none(隐藏) */
	.end-title {
		display: flex;
	}

	.end-title view {
		flex-grow: 1;
		text-align: center;
	}

	.end-cont {
		display: none;
		/* background: #C8C7CC; */
	}

	.btna {
		color: #FFFFFF;
		background: #00A0FF;
	}

	.dis {
		display: block;
	}
</style>
